<template>
    <div class="goodlist_container">
        <ul v-load-more="loaderMore" v-if="goodsListArr.length" type="1">
             <div class="goodcontainer">
                    <router-link :to="{path: 'good', query:{id: item.id}}" v-for="item in goodsListArr" class="gooditem">
                            <section>
                                <img :src="item.goods_front_image" class="good_img">
                            </section>
                            <span class="goodtitle">{{item.goods_brief}}</span>
                            <hr style="height:1px;border:none;border-top:0.01em solid #9f9f9ff9;width: 5.7em"/>
                            <span class="goodprice">￥{{item.goods_price}}</span>
                        </router-link>
             </div>
        </ul>
        <ul v-else class="animation_opactiy">
            <li class="list_back_li" v-for="item in 10" :key="item">
                <img src="../../images/goodback.svg" class="list_back_svg">
            </li>
        </ul>
        <p v-if="touchend" class="empty_data">没有更多了</p>
        <aside class="return_top" @click="backTop" v-if="showBackStatus">
            <svg class="back_top_svg">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#backtop"></use>
            </svg>
        </aside>
        <div ref="abc" style="background-color: red;"></div>
        <transition name="loading">
            <loading v-show="showLoading"></loading>
        </transition>
    </div>
</template>

<script>

    import {mapState} from 'vuex'
    import {goodList} from 'src/service/getData'
    import {imgBaseUrl} from 'src/config/env'
    import {showBack, animate} from 'src/config/mUtils'
    import {loadMore, getImgPath} from './mixin'
    import loading from './loading'

    export default {
        data() {
            return {
                offset: 0, // 批次加载商品列表，每次加载20个 limit = 20
                goodsListArr: [], // 商品列表数据
                preventRepeatReuqest: false, //到达底部加载数据，防止重复加载
                showBackStatus: false, //显示返回顶部按钮
                showLoading: true, //显示加载动画
                touchend: false, //没有更多数据
                imgBaseUrl,
                // keyword,
            }
        },
        mounted() {
            this.initData();
        },
        components: {
            loading,
        },
        props: ['goodsCategoryId', 'goodCategoryIds', 'sortByType', 'deliveryMode', 'supportIds', 'confirmSelect', 'geohash', 'keyword'],
        mixins: [loadMore, getImgPath],
        // computed: {
        // 	...mapState([
        // 		'latitude','longitude'
        // 	]),
        // },
        updated() {
        },
        methods: {
            async initData() {
                //获取数据
                let res;
                console.log('getgoodlist----');
                res = await goodList();
                this.goodsListArr = [...res];
                if (res.length < 20) {
                    this.touchend = true;
                }
                this.hideLoading();
                //开始监听scrollTop的值，达到一定程度后显示返回顶部按钮
                showBack(status => {
                    this.showBackStatus = status;
                });
            },
            //到达底部加载更多数据
            async loaderMore() {
                if (this.touchend) {
                    return
                }
                //防止重复请求
                if (this.preventRepeatReuqest) {
                    return
                }
                this.showLoading = true;
                this.preventRepeatReuqest = true;

                //数据的定位加20位
                this.offset += 20;
                let res = await goodList();//this.latitude, this.longitude, this.offset, this.goodCategoryId
                this.hideLoading();
                this.goodsListArr = [...this.goodsListArr, ...res];
                //当获取数据小于20，说明没有更多数据，不需要再次请求数据
                if (res.length < 20) {
                    this.touchend = true;
                    return
                }
                this.preventRepeatReuqest = false;
            },
            //返回顶部
            backTop() {
                animate(document.body, {scrollTop: '0'}, 400, 'ease-out');
            },
            //监听父级传来的数据发生变化时，触发此函数重新根据属性值获取数据
            async listenPropChange() {
                this.showLoading = true;
                this.offset = 0;
                let res = await goodList();
                this.hideLoading();
                //考虑到本地模拟数据是引用类型，所以返回一个新的数组
                this.goodsListArr = [...res];
            },
            //开发环境与编译环境loading隐藏方式不同
            hideLoading() {
                this.showLoading = false;
            },
            zhunshi(supports) {
                let zhunStatus;
                if ((supports instanceof Array) && supports.length) {
                    supports.forEach(item => {
                        if (item.icon_name === '准') {
                            zhunStatus = true;
                        }
                    })
                } else {
                    zhunStatus = false;
                }
                return zhunStatus
            },
        },
        watch: {
            //监听父级传来的goodCategoryIds，当值发生变化的时候重新获取餐馆数据，作用于排序和筛选
            goodCategoryIds: function (value) {
                this.listenPropChange();
            },
            //监听父级传来的排序方式
            sortByType: function (value) {
                this.listenPropChange();
            },
            //监听父级的确认按钮是否被点击，并且返回一个自定义事件通知父级，已经接收到数据，此时父级才可以清除已选状态
            confirmSelect: function (value) {
                this.listenPropChange();
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import 'src/style/mixin';

    .goodlist_container {
        background-color: #f5f5f5;
        margin-bottom: 2rem;
        display: block;
        //width:16em;
    }

    .gooditem{
        display: inline-block;
        //float: left;
        width: 7.2em;
        margin: 0.1em;
        /*margin-right: 0.45em;*/
        /*margin-bottom: 0.3em;*/
        border-radius: 0.2em;
        background-color: #fff;
        overflow: hidden;
    }

    .goodcontainer {
        background-color: #f5f5f5;
        margin: 0.6em;
        border-radius: 0.2em;
        overflow: hidden;
        width:15.4em;
        //float: left;
       // font-size: 0;

        .goodtitle {
            width: 100% ;
            float: left ;
            color: #333;
            //word-break:normal;
            word-wrap : break-word ;
           // padding-top: .01rem;
            overflow: hidden ;
            text-overflow: ellipsis ;
            white-space: normal ;
            margin-top: 0.2rem;
            @include font(0.4rem, 0.5rem, 'PingFangSC-Regular');
            font-weight: 700;
            text-align: left;
            display: block;
            //vertical-align: top;
        }

          hr {
        height:0.01em;
        border:none;
        border-top:0.01em solid #9f9f9ff9;
        width: 5.7em;
        display: block;
         margin-top: 0.4em;
        margin-bottom: 0.3em;
              float: left;
    }
        .goodprice {
            width: 50%;
            display: block;
            transform: scale(.5);
            margin-top: 0em;
            display: block;
            float: right;
             overflow: hidden ;
            text-overflow: ellipsis ;
            white-space: normal ;
            .supports {
                @include sc(0.3rem, #999);
                border: 0.025rem solid #f1f1f1;
                padding: 0 0.04rem;
                border-radius: 0.08rem;
                margin-left: 2rem;
            }
        }
    }

    .good_li {
        display: flex;
        border-bottom: 0.025rem solid #f1f1f1;
        padding: 0.7rem 0.4rem;
    }

    .good_img {
        //@include wh(2.7rem, 2.7rem);
        display: block;
        margin-right: 0.4rem;
        height: 6rem;
        width: 100%;
    }

    .list_back_li {
        height: 4.85rem;

        .list_back_svg {
            @include wh(100%, 100%)
        }
    }

    .good_right {
        flex: auto;

        .good_detail_header {
            @include fj;
            align-items: center;

            .good_title {
                width: 8.5rem;
                color: #333;
                padding-top: .01rem;
                @include font(0.65rem, 0.65rem, 'PingFangSC-Regular');
                font-weight: 700;
            }

            .good_detail_ul {
                display: flex;
                transform: scale(.8);
                margin-right: -0.3rem;

                .supports {
                    @include sc(0.5rem, #999);
                    border: 0.025rem solid #f1f1f1;
                    padding: 0 0.04rem;
                    border-radius: 0.08rem;
                    margin-left: 0.05rem;
                }
            }
        }

    }

    .loader_more {
        @include font(0.6rem, 3);
        text-align: center;
        color: #999;
    }

    .empty_data {
        @include sc(0.5rem, #666);
        text-align: center;
        line-height: 2rem;
    }

    .return_top {
        position: fixed;
        bottom: 3rem;
        right: 1rem;

        .back_top_svg {
            @include wh(2rem, 2rem);
        }
    }

    .loading-enter-active, .loading-leave-active {
        transition: opacity 1s
    }

    .loading-enter, .loading-leave-active {
        opacity: 0
    }
</style>
